﻿<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" encoding="utf-8"/>
  <xsl:template match="/">

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages:['barchart']});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
      var data = new google.visualization.DataTable();

      data.addColumn('string', 'Year');
      data.addColumn('string', 'Population');
      data.addRows(4); // hard-coded for testing

      <xsl:for-each select="DocumentElement/QueryResults">
        data.setValue(0, 0, '<xsl:value-of select="Year"/>');
        data.setValue(0, 1, '<xsl:value-of select="Population"/>');
      </xsl:for-each>

      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Population'});
      }
    </script>

    <div id="chart_div">&#160;</div>

  </xsl:template>
</xsl:stylesheet>

